<template>
	<el-dialog class="abow-dialog" :visible.sync="visible" title="绑定短剧"
		:close-on-click-modal="false" :close-on-press-escape="false" width="650px">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px" size="medium"
			:inline="false" labelSuffix="：">
			<el-form-item prop="playlet_ids" label="绑定短剧">
				<el-select v-model="dataForm.playlet_ids" multiple filterable default-first-option placeholder="请选择">
					<el-option v-for="item in playletList" :key="item.value" :label="item.alias_name" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import schema from 'async-validator';
	export default {
		data() {
			return {
				diytype:null,
				appletId: null,
				field: '',
				innerTitle: '',
				innerImgVisible: false,
				clickImg: '',
				playletList: [], //短剧列表数据
				visible: false,
				deptList: [],
				deptListVisible: false,
				fullscreenLoading: false,
				roleList: [],
				roleIdListDefault: [],
				dataForm: {
					playlet_ids: []
				}
			}
		},
		created() {},
		computed: {
			dataRule() {
				return {
					playlet_ids: [{
						required: true,
						message: '短剧不能为空!',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		methods: {
			//获取短剧列表
			async playletListFn(init = true) {
				const pRes = await this.$axios.get(`/api/common/playlet`);
				console.log(pRes);
				if(Array.isArray(pRes)) {
					if (pRes.length) {
						this.playletList = pRes;
						return;
					}
				}
				this.playletList = [];
			},
			init() {
				this.visible = true;
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},

			update(row) {
				this.visible = true;
				this.playletListFn();
				this.$nextTick(() => {
					if(Array.isArray(row)) {
						if (row.length) {
							this.dataForm['playlet_ids'] = row;
							console.log(this.dataForm);
							return;
						}
					}
					this.dataForm['playlet_ids'] = [];
					this.$refs.dataForm.clearValidate();
				})
			},

			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.dataForm);
					this.$axios.post(this.diytype==1?`/api/playlet/applet/bindPlaylet/${this.appletId}`:`/api/playlet/applet/bindPlayletDelivery/${this.appletId}`  , this.dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 1200,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 540px;
	}

	.innerDialog :deep(.el-dialog__header) {
		padding: 20px !important;
	}

	.innerDialog :deep(.el-dialog__body) {
		padding: 0px !important;
	}

	.innerDialog :deep(.el-dialog__headerbtn) {
		font-size: 25px !important;
	}
</style>